<template>
	<view class="user-set-repassword">
		<input type="text" password class="uni-input" v-model="oldpwd" placeholder="输入旧密码"/>
		<input type="text" password class="uni-input" v-model="newpwd" placeholder="输入新密码"/>
		<input type="text" password class="uni-input" v-model="renewpwd" placeholder="输入确定密码"/>
		<button type="primary" :loading="loading" class="user-set-btn" :class="{'user-set-btn-disable':disable}" @tap="submit">完成</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				oldpwd: '',
				newpwd: '',
				renewpwd: '',
				disable: true,
				loading: false
			}
		},
		watch:{
			oldpwd:{
				handler(val){
					this.change()
				},
				deep: true
			},
			newpwd:{
				handler(val){
					this.change()
				},
				deep: true
			},
			renewpwd:{
				handler(val){
					this.change()
				},
				deep: true
			}
		},
		methods: {
			// 监听输入框
			change() {
				if(this.oldpwd && this.newpwd && this.renewpwd){
					this.disable = false
					return
				}
				this.disable = true
			},
			// 验证层
			check() {
				if(!this.oldpwd || this.oldpwd === ""){
					uni.showToast({
						title:'旧密码不能为空',
						icon:'none'
					})
					return false
				}
				if(!this.newpwd || this.newpwd === ""){
					uni.showToast({
						title:'新密码不能为空',
						icon:'none'
					})
					return false
				}
				if(!this.renewpwd || this.renewpwd === ""){
					uni.showToast({
						title:'确定密码不能为空',
						icon:'none'
					})
					return false
				}
				if(this.newpwd !== this.renewpwd){
					uni.showToast({
						title:'新密码与确定密码不一致',
						icon:'none'
					})
					return false
				}
				return true;
			},
			// 提交
			submit() {
				this.loading = true
				if(!this.check()){this.loading = false; return}
				uni.showToast({
					title:'验证通过',
					icon:'success',
					mask:false
				})
				this.loading = false
			}
		}
	}
</script>

<style scoped lang="scss">
.user-set-repassword{
	padding: 20upx;
	> input{
		border-bottom:1upx solid #f2f2f2;
		font-size: 30upx;
	}
	@import '../../common/css/form.scss';
}
</style>
